<app-breadcrumb [tenantId]="tenantId"></app-breadcrumb>

<div class="cards-container">
  <div *ngFor="let hotelBrand of hotelBrands" class="" (click)="chooseHotelBrand(hotelBrand)">

    <div class='card'>
      <div class='card-name'>
        {{hotelBrand.friendlyName}}
      </div>

      <div class='card-logo'>
        <div class='card-logo-inner-container'>
          <img class="bcard-logo-image" [src]="getHotelBrandImage(hotelBrand)  | secure | async" />
        </div>
      </div>

      <img src="/assets/images/alert.png" class="card-alert-image" *ngIf="hotelBrand.hasAlert" />
    </div>

  </div>
</div>

<div class="dashboard-cards-container" *ngIf="hotelBrands !== null">

  <div class="dashboard-map-card">
    <div class="card-name">
      Location
    </div>
    <div class="dashboard-map-item">
      <app-map [pushpinLocations]="hotelGeoLocations"></app-map>
    </div>
  </div>

  <div class="dashboard-map-card">
    <div class="card-name">
      KPI
    </div>
    <div class="dashboard-map-item">
      <div>
        <app-tsi-chart [tempSensorIds]="tempSensorIds" [lightSensorIds]="lightSensorIds" [motionSensorIds]="motionSensorIds"></app-tsi-chart>
      </div>
    </div>
  </div>

  <div class="dashboard-schedule-card">
    <div class="dashboard-schedule-item">
      <img src="/assets/images/scheduled maintenance.jpg" />
    </div>
    <div class="card-name schedule">
      Upcoming Maintenance
    </div>
  </div>

</div>

